import styled from 'styled-components'

export const Btndiv = styled.div`


width:100%;
height:.44rem;
background:#ee742f;
display:flex;
align-items:center;
justify-content:center;
ul{
width:1.4rem;
height:.3rem;
display:flex;
position:relative;
border:1px solid #fff;
z-index:0;
border-radius:.15rem;
li{
flex:1;
line-height:.3rem;
text-align:center;
color:#fff;
&:last-child{
position:absolute;
width:50%;
height:.3rem;
background:#fff;
z-index:-1;
border-radius:.15rem;
transform:translate(0,0);
transition:all 0.4s ease-in;
&.right{
  transform:translate(100%,0);
}
}
&.active{
color:#ee742f;
transition:all 0.4s ease-in;
}
}
}
`

export const Sliderdiv = styled.div`

/* height:100%;
width:100%;
display:flex;
   >div:first-child{
    
     width:.9rem;
     background-color:#f3f3f3;

     ul{
     
       height:100%;
       overflow-y:scroll;
       li{
         line-height:.4rem;
         text-align:center;
         span{
            display:inline-block;
            height:.4rem;
            color:#7e7e7e;
            font-size:.13rem;

         }
         &.active{ 
           background-color:#ffffff;     
           span{
             color:#d77d41;
            border-bottom:1px solid #d77d41;
           }
         }
        
       }
     }
    }

    >div:last-child{
      flex:1;
      background-color:#ffffff;
      ul{
      
        display:flex;
        flex-wrap:wrap;
        overflow-y:scroll;
     
        li{
          height:.6rem;
          line-height:.6rem;
          text-align:center;
          width:33%;
          color:#d0d0d0;
        }
      }
    } */
height:100%;
display:flex;
> div:first-child{
width:.9rem;
> ul{
height:100%;
overflow-y:scroll;
li{
height:.5rem;
text-align:center;
line-height:.5rem;
background:#f3f3f3;
span{
  color:#505050;

}
&.active{
background:#fff;
span{
display:inline-block;
height:100%;
border-bottom:1px solid #ee742f;
color:#e38257;

}
}
}
}
}
>div:last-child{
flex:1;
background:#fff;
padding:.2rem .1rem;
>ul{
display:flex;
flex-wrap:wrap;
overflow-y:scroll;
height:100%;
align-content:flex-start;
li{
width:33.3333%;
text-align:center;
height:.5rem;
line-height:.5rem;
color:#a8a8a8;
}
}




`